import React, { Component } from 'react';
import { Toast, ToastHeader, ToastBody, Label, Col,Row } from 'reactstrap';

export class ToastSensor extends Component {
    static displayName = ToastSensor.name;
    constructor(props){
        super(props)
        this.state = {item:[]}
    }
    componentDidMount(){
        if(this.props.data===undefined) return;
        let node = this.props.data.map((it,index)=>{
            return (
                <Toast key={index}>
                    <ToastHeader>{it}</ToastHeader>
                    <ToastBody>
                        <Row>
                            <Col>
                                <Label>item1</Label>
                            </Col>
                            <Col>
                                <Label>data</Label>
                            </Col>
                        </Row>
                    </ToastBody>
                </Toast>
            )
        })
        this.setState({item:node})
    }
    render(){
        return (
            <div style={{overflow:"scroll",height:'100%'}}>
                {this.state.item}
            </div>
        );
    }
}